<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<link rel="icon" href="/easyui/favicon.ico" type="image/x-icon" />
		<link rel="shortcut icon" href="/easyui/favicon.ico" type="image/x-icon" />
		<title>引导页（例子）</title>
		<style type="text/css">
			body {
				background-color: #eef1f8;
			}
			
			* {
				margin: 0;
				padding: 0;
			}
			
			.menu {
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				padding: 10px 20px;
			}
			
			.item {
				display: inline-block;
				width: 300px;
				height: 100px;
				line-height: 100px;
				list-style: none;
				border-radius: 200px 100px/ 100px 200px;
				text-align: center;
				margin:0 10px 10px 0;
			}
			
			.item:hover {
				opacity: 0.7;
			}
			
			.text {
				color: #FFFFFF;
				text-decoration: none;
				font-size: 40px;
			}
		</style>
	</head>

	<body>
		<ul class="menu">
			<li class="item" style="background: #da4453;">
				<a target="_self" class="text" href="#">临</a>
			</li>
			<li class="item" style="background: #E9573F;">
				<a target="_self" class="text" href="#">兵</a>
			</li>
			<li class="item" style="background: #F6BB42;">
				<a target="_self" class="text" href="#">斗</a>
			</li>
			<li class="item" style="background: #8CC152;">
				<a target="_self" class="text" href="#">者</a>
			</li>
			<li class="item" style="background: #378C9B;">
				<a target="_self" class="text" href="#">皆</a>
			</li>
			<li class="item" style="background: #3BAFDA;">
				<a target="_self" class="text" href="#">数</a>
			</li>
			<li class="item" style="background: #f3d7ca;">
				<a target="_self" class="text" href="#">组</a>
			</li>
			<li class="item" style="background: #75c2f6;">
				<a target="_self" class="text" href="#">前</a>
			</li>
			<li class="item" style="background: #e6a4b4;">
				<a target="_self" class="text" href="#">行</a>
			</li>
		</ul>
		<script type="text/javascript">
		</script>
	</body>

</html>